<template>
  <div>
    <div class="login-boxtitle">
      <a href="/"><img alt="" src="../../assets/img/logo.png" /></a>
    </div>

    <div class="res-banner" id="r_form" style="background: rgb(80,188,182);">
      <div class="res-main">
        <div class="login-banner-bg"><span></span><img src="../../assets/img/bg1.png" /></div>
        <div class="login-box">
          <div class="am-tabs" id="doc-my-tabs">
            <ul class="am-tabs-nav am-nav am-nav-tabs am-nav-justify">
              <template v-if="regType==1">
                <li v-on:click="regType=0,clear()"><a href="javascript:;;">手机号注册</a></li>
                <li style="border-bottom:1px solid" v-on:click="regType=1,clear()"><a href="javascript:;;">邮箱注册</a></li>
              </template>
              <template v-if="regType==0">
                <li style="border-bottom:1px solid" v-on:click="regType=0,clear()"><a href="javascript:;;">手机号注册</a></li>
                <li v-on:click="regType=1,clear()"><a href="javascript:;;">邮箱注册</a></li>
              </template>
            </ul>

            <div class="am-tabs-bd">
              <div class="am-tab-panel am-active" v-if="regType==1">
                <form method="post">
                  <div class="user-email">
                    <label for="email"><i class="am-icon-envelope-o"></i></label>
                    <input type="email" name="" id="email" v-model="email" placeholder="请输入邮箱账号">
                  </div>
                  <div class="verification">
                    <label for="code"><i class="am-icon-code-fork"></i></label>
                    <input type="text" AUTOCOMPLETE="off" name="code" id="code" style="width:50%" placeholder="请输入验证码" v-model="verCode">
                    <a class="btn" href="javascript:void(0);" id="sendMobileCode">
                      <button style="float: right;height: 42px;font-size: 18px;" v-on:click="verification" type="button" v-bind:class="verClass" v-bind:disabled="ds">{{verLabel}}</button>
                    </a>
                  </div>
                  <div class="verification">
                    <label for="">学校</label>
                    <el-cascader :options="schools" v-model="school" :show-all-levels="false" style="float:right"></el-cascader>
                  </div>
                  <div class="user-pass">
                    <label for="password"><i class="am-icon-lock"></i></label>
                    <input type="password" name="" id="password" v-model="password" placeholder="设置密码">
                  </div>
                  <div class="user-pass">
                    <label for="passwordRepeat"><i class="am-icon-lock"></i></label>
                    <input type="password" name="" v-model="passwordRepeat" v-on:keyup="verifyPassword1()" id="passwordRepeat" placeholder="确认密码">
                    <span style="color:red">{{passwordTip}}</span>
                  </div>

                </form>
                <div class="am-cf">
                  <input type="submit" name="" value="注册" v-bind:disabled="subDisabled" v-on:click="saveUser()" class="am-btn am-btn-primary am-btn-sm am-fl">
                </div>

              </div>

              <div class="am-tab-panel am-active" v-if="regType==0">
                <form method="post">
                  <div class="user-phone">
                    <label for="phone"><i class="am-icon-mobile-phone am-icon-md"></i></label>
                    <input type="tel" name="" id="phone" placeholder="请输入手机号" v-model="phone">
                  </div>
                  <div class="verification">
                    <label for="code"><i class="am-icon-code-fork"></i></label>
                    <input type="text" AUTOCOMPLETE="off" name="code" id="code" style="width:50%" placeholder="请输入验证码" v-model="verCode">
                    <a class="btn" href="javascript:void(0);" id="sendMobileCode">
                      <button style="float: right;height: 42px;font-size: 18px;" v-on:click="verification" type="button" v-bind:class="verClass" v-bind:disabled="ds">{{verLabel}}</button>
                    </a>
                  </div>
                  <div class="verification">
                    <label for="">学校</label>
                    <el-cascader :options="schools" v-model="school" :show-all-levels="false" style="float:right"></el-cascader>
                  </div>
                  <div class="user-pass">
                    <label for="password"><i class="am-icon-lock"></i></label>
                    <input type="password" name="" id="password" v-model="password" @change="validate()" placeholder="设置密码">
                  </div>
                  <div class="user-pass">
                    <label for="passwordRepeat"><i class="am-icon-lock"></i></label>
                    <input type="password" name="" v-model="passwordRepeat" v-on:keyup="verifyPassword1()" id="passwordRepeat" placeholder="确认密码">
                    <span style="color:red">{{passwordTip}}</span>
                    <span style="color:red">{{nowmsg}}</span>
                  </div>
                </form>
                <div class="am-cf" style="margin-top:50px">
                  <input type="submit" name="" v-on:click="saveUser()" value="注册" class="am-btn am-btn-primary am-btn-sm am-fl">
                </div>
                <hr>
              </div>
            </div>
          </div>

        </div>
      </div>

      <foot></foot>
    </div>
    <iframe src="http://localhost/index.html" ref="iframe" style="height: 0px;width: 0px;display: none;"></iframe>
  </div>
</template>

<script>
import myheader from '@/components/myheader.vue'
import navfull from '@/components/navfull.vue'
import navtable from '@/components/navtable.vue'
import leftmenu from '@/components/leftmenu.vue'
import foot from '@/components/foot.vue'
export default {
  name: 'register',
  data () {
    return {
      verify: 'phone',
      typeLabel: '手机',
      schools: [],
      school: [],
      account: '',
      email: "",
      phone: "",
      password: '',
      passwordRepeat: '',
      passwordTip: '',
      regType: 0,
      verCode: '',
      verLabel: '获取验证码',
      totalTime: 59,
      timer: null,
      ds: false,
      verClass: 'am-btn am-btn-secondary',
      subDisabled: false,
      nowmsg: null
    }
  },
  components: {
    myheader,
    navfull,
    navtable,
    leftmenu,
    foot
  },
  mounted () {
    this.getUniversity()
  },
  methods: {
    validate () {
      if (!/^\w{6,18}$/.test(this.password)) {
        this.nowmsg = "登录密码由6-18位数字、英文字母或者下划线组成";
      } else {
        this.nowmsg = null;
      }
    },
    getUniversity () {
      this.$http.get('static/universitys.json').then(res => {
        this.schools = res.body;
      })
    },
    verification () {//获取验证码
      if (!/^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/.test(this.phone) && this.regType == 0) {
        this.$layer.msg('请输入正确的手机号');
        return;
      }
      if (!/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/.test(this.email) && this.regType == 1) {
        this.$layer.msg('请输入正确的邮箱地址');
        return;
      }
      this.account = this.regType == 1 ? this.email : this.phone;
      this.axios.get('user/reg/getVerCode', {
        params: {
          account: this.account,
          regType: this.regType
        }
      }).then((response) => {
        var data = response.data;
        var code = data.code;
        if (code != 200) {
          this.$layer.msg(data.msg);
          var hisTime = data.ttl;
          if (hisTime != null && hisTime != undefined) {
            this.totalTime = hisTime;
            this.daojishi();
          }

        } else {
          this.daojishi();
          this.$layer.msg(data.msg);
        }
      })
    },//verification()
    daojishi () {//验证码获取倒计时
      this.verLabel = '重新获取(' + this.totalTime + ')';
      this.ds = "disabled";
      this.verClass = "am-btn am-btn-default";
      this.timer = window.setInterval(() => {
        this.totalTime--;
        if (this.totalTime <= 0) {
          this.verLabel = '获取验证码';
          this.totalTime = 59;
          this.ds = false;
          this.verClass = 'am-btn am-btn-secondary';
          clearInterval(this.timer);
        } else
          this.verLabel = '重新获取(' + this.totalTime + ')';
      }, 1000)
    },
    clear () {//重置验证码
      this.totalTime = 0
      this.verLabel = '获取验证码'
      this.ds = false
    },
    verifyPassword1 () {//校验密码
      var p1 = this.password;
      var p2 = this.passwordRepeat;
      if (p1 != p2 && p2 != "") {
        this.passwordTip = "两次密码不同"
      } else {
        this.passwordTip = ""
      }
    },
    saveUser () {
      
      this.subDisabled = true;
      this.account = this.regType == 1 ? this.email : this.phone;
      var account = this.account;
      var regType = this.regType;
      var verifyT = this.verifyAccount(account, regType);
      var schoolId = this.school[1];
      var childrens = this.schools[this.school[0] - 1].children;
      let schoolName;
      for (let i in childrens) {
        if (childrens[i].value == schoolId) {
          schoolName = childrens[i].label;
        }
      }
      if (!verifyT) {
        this.subDisabled = false;
        return;
      }

      var password = this.password;
      var passwordRepeat = this.passwordRepeat;
      var verifyT = this.verifyPassword(password, passwordRepeat);
      if (!verifyT) {
        this.subDisabled = false;
        return;
      }
      var verCode = this.verCode;
      this.axios.post('user/reg/addUsers', {
        account: account,
        password: this.$md5(password),
        verCode: verCode,
        regType: regType,
        schoolId: schoolId,
        schoolName: schoolName
      }
      )
        .then((response) => {
          this.subDisabled = false;
          var result = response.data;
          if (result.code == 200) {
            var data = result.data;
            localStorage.setItem("AUTHTOKEN", data.AUTHTOKEN);
            localStorage.setItem("NICKNAME", data.NICKNAME);
            localStorage.setItem("schoolId", data.SCHOOL);
            var msg = JSON.stringify({
              AUTHTOKEN: localStorage.getItem("AUTHTOKEN"),
              NICKNAME: localStorage.getItem("NICKNAME")
            })
            this.$refs.iframe.contentWindow.postMessage(msg, '*');
            this.$router.push({
              name: "information"
            })
          } else {
            this.$layer.msg(result.msg);
          }

        })
    },
    verifyPassword: function (p1, p2) {
      if (!/^\w{6,18}$/.test(this.password)) {
        this.$layer.msg("登录密码由6-18位数字、英文字母或者下划线组成");
        return false;
      }
      if (p1 == "" || p2 == "") {
        this.$layer.msg('密码不能为空');
        return false;
      }
      if (p1 != p2 && p2 != "") {
        this.$layer.msg('两次密码必须相同');
        return false;
      }
      return true;
    },
    verifyAccount: function (account, type) {
      if (!/^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/.test(account) && type == 0) {
        this.$layer.msg('请输入正确的手机号');
        return false;
      }
      if (!/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/.test(account) && type == 1) {
        this.$layer.msg('请输入正确的邮箱地址');
        return false;
      }
      return true;
    },
  }
}
</script>

<style scoped>
@import "../../AmazeUI-2.4.2/assets/css/amazeui.css";
@import "../../assets/css/dlstyle.css";
</style>
